<template>
	<view class="page">
		<mescroll-uni top="100"  @up="upCallback" :up="upOption"
		  @init="mescrollInit"
		  @down="downCallback"
		  ref="mescroll"
		  class="message">
		           
		           <swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" >
		           	<swiper-item v-for="(carousel,index) in carousels" :key="carousel.id">
		           		<view class="swiper-item">
		           			<image :src="carousel.imgPath" mode="aspectFill" />
		           			<view class="uni-swiper__dots-box uni-swiper__dots-nav" style="background-color: rgba(0, 0, 0, 0.3);">
		           				<view data-v-1e0c0787="" class="uni-swiper__dots-nav-item" style="color: rgb(255, 255, 255); width: 100%; text-align: left;"><span
		           					 class="fr">{{index+1}}/{{carousels.length}}</span>
		           					撬动校友经济，郑州如何发力？</view>
		           			</view>
		           		</view>
		           	</swiper-item>
		           </swiper>
		           
		           	<div id="tagnav" class="weui-navigator weui-navigator-wrapper sc-subnav">
		           		<ul class="weui-navigator-list">
		           			<!-- weui-state-active -->
		           			<!-- <li :class="weui-state-active"><a href="javascript:;">全部</a></li> -->
		           			<li v-for="(category,index) in categorys"  
		           			:class="category.id==selectTab?'weui-state-active':''"
		           			:key="category.id"><a href="javascript:;">
		           			<view class="" @tap="categoryClick" :data-index="category.id">
		           			{{category.name}}	
		           			</view>
		           			</a></li>
		           		</ul>
		           	</div>
		           	<div class="weui-panel__bd sc-news">
		           		<navigator :url="'/pages/news/detail?id='+content.id" v-for="(content,index) in contents" :key="content.id" class="weui-media-box weui-media-box_appmsg">
		           			<view class="weui-media-box__hd ">
		           				<img class="weui-media-box__thumb" :src="content.imgThumbnail" alt="">
		           			</view>
		           			<view class="weui-media-box__bd">
		           				<h4 class="weui-media-box__title">{{content.title}}</h4>
		           				<view class="weui-media-box__desc u-f u-f-ac">
		           					<text class="u-f1">{{content.publishTime}}</text>
		           					<text class="u-f1 tar">阅读：{{content.viewNum}}</text>
		           				</view>
		           			</view>
		           		</navigator>
		           	</div>
		           	
		 </mescroll-uni>
		
		
		
		
	</view>
</template>
<script>
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	export default {
		data() {
			return {
				carousels: [],
				contents: [],
				categorys: [],
				selectTab:0,
				isShowNoMore:false,
				mescroll:null,
				upOption:"没用数据了",
				
			}
		},
		onLoad() {
			this.getCarousels();
			this.getCategorys();
			this.getContents();
		},
		methods: {
			mescrollInit(mescroll) {
							console.log(mescroll)
							 this.mescroll = mescroll;
						},

			// 上拉加载
			
			upCallback(){
		// 		setTimeout(()=>{
		// 						console.log(6655,"上拉");
		// this.mescroll.endErr()
				
		// 			this.mescroll.endErr()
		// 					},1000)
						let _self = this;
						this.$get(this.$api.cmsList, {}).then(res => {
							if (res.code == 0) {
								// _self.contents = res.page.list;
									res.page.list.forEach((val)=>{
										_self.contents.push(val)
									})
								this.mescroll.endErr()
								
									console.log(res.page.list)
										
							} else {
								uni.showModal({
									title: '操作提示',
									content: res.msg,
									showCancel: false
								})
							}
						})	

				},
				// // 下拉刷新
				downCallback(){
						this.getContents();
						this.mescroll.endErr()
					console.log("下拉刷新");
					},
			categoryClick(e){
			const index = 	e.currentTarget.dataset.index;
			this.categorys.forEach((val)=>{
				if(index==val.id){
					// console.log(val.name)
					this.selectTab = index
				}
			})
			},
			getCarousels(){
				let _self = this;
				this.$get(this.$api.cmsCarousels, {}).then(res => {
					if (res.code == 0) {
						_self.carousels = res.list;
					} else {
						uni.showModal({
							title: '操作提示',
							content: res.msg,
							showCancel: false
						})
					}
				})
		
			},
			getContents(id){
				let _self = this;
				this.$get(this.$api.cmsList, {}).then(res => {
					if (res.code == 0) {
						_self.contents = res.page.list;
					} else {
						uni.showModal({
							title: '操作提示',
							content: res.msg,
							showCancel: false
						})
					}
				})
			},
			getCategorys(){
				let _self = this;
				this.$get(this.$api.cmsCList, {
					
				}).then(res => {
					if (res.code == 0) {
						 res.list.unshift({
							 name:"全部",
							 id:0
						 })
						_self.categorys = res.list;
					} else {
						uni.showModal({
							title: '操作提示',
							content: res.msg,
							showCancel: false
						})
					}
				})
			}
		
		},
		 components:{
		            MescrollUni
		        },
	}
</script>

<style>
.example-body-item {
		position: absolute;
		bottom: 0;
		left: 0;
		background: #000000;
		padding: 0 30upx;
		opacity: 0.7;
		color: #fff;
		border-radius: 80upx;
	}

	uni-swiper {
		height: 360upx;
	}
	
	.swiper-item {
		display: block;
		height: 360upx;
		line-height: 360upx;
		text-align: center;
		background: #007AFF;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}
	.uni-swiper__dots-box {
		position: absolute;
		bottom: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: box-sizing;
		width: 100%;
	}
	
	
	.uni-swiper__dots-nav {
		bottom: 0;
		height: 80upx;
		justify-content: flex-start;
		background: rgba(0, 0, 0, 0.2);
		box-sizing: box-sizing;
		overflow: hidden;
	}
	
	.uni-swiper__dots-nav-item {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28upx;
		color: #fff;
		box-sizing: box-sizing;
		margin: 0 30upx;
	}
</style>
